<template>
	<view class="Ttext">
		  <!-- 文本内容 -->
	<view>
		<view id="qyjs" :class="{ showAllQyjs: showAll == false, qyjs: true }">
	  {{ info.desc}}</view>
	</view>
	<!-- 占位文本 -->
	<label class="btn"  @click="showinfo" v-if="lines > 3">{{ showAll ? '收起' : '展开' }}</label>
	<view>
		<text id="placeholder" class="qyjs">{{ placeholder }}</text>
	</view>
	
	</view>
	
	</template>
	 
	<script>
		export default {
			props:['text'],
			data() {
		return {
			// 企业介绍
			showAll: true, //控制展开收起
			lineHeight: 0, //单行文本高度
			textHeight: 0, //文本高度
			placeholder: '占',
			info: {
		desc:this.text
			},
		};
	},
	
	computed: {
		//文本所占总行数
		lines() {
			let line = Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0)
		
			return line
		}
	},
	
			methods: {
		// 获取文本高度
		getQyjsHeight() {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			
			//获取文本展示高度
			query.select('#qyjs').fields({
				size: true,
			}, data => {
				that.textHeight = data.height;
      //  console.log('h',that.textHeight)
			}).exec();
			
			//获取单行文本高度
			query.select('#placeholder').fields({
				size: true,
			}, data => {
				that.lineHeight = data.height;
	
		  //占位文本置空
			this.placeholder = '';
      this.showAll = false
			}).exec();
	
			
			// //获取高度后收起文本
			// 
		},
		// 展示隐藏查看更多
	showinfo() {
		this.showAll = !this.showAll
	},	
	},
	created(){
		this.getQyjsHeight()
	}
		}
		
	</script>
	 
	<style lang="scss" >
	.Ttext{
	  line-height: 12px;
	  font-size: 12px;
	  
	}
	.showAll {
		
		text-align: right;
	}
	
	.qyjs {
		display: -webkit-box;
	  text-indent: 2em; 

	}
	
	.showAllQyjs {
		display: -webkit-box; 
		overflow: hidden;
		-webkit-line-clamp: 3; 
		text-overflow:  clip; 
		-webkit-box-orient: vertical;
	}
	.btn {
	 position: relative;
	
	
	  bottom: 1px;
	  float: right;
	padding: 2px;
	
	  color: #3f51b5;
	  border-radius: 4px;
	  cursor: pointer;
	}
	</style>